<template>
  <div id="container">
    <!--头部横栏-->
    <el-row>
      <el-col :xs="{span:24}">
        <div class="block_top">
          <span>维修单据</span>
        </div>
      </el-col>
    </el-row>

    <!--报修查询-->
    <el-row :gutter="50">
      <el-col :xs="{span:24,offset:0}" :sm="{span:4,offset:0}">
        <div class="side_item">
          <div class="search-box">
            <el-input
              class="input-box"
              placeholder="请输入学号"
              prefix-icon="el-icon-search"
              v-model="input_Id"
            ></el-input>
            <el-button id="searchBtn" type="primary" @click="getListId">查询</el-button>
          </div>
        </div>
      </el-col>

      <!-- 报修列表 -->
      <el-col :xs="{span:24,offset:0}" :sm="{span:20,offset:0}">
        <div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :header-cell-style="headClass"
            :cell-style="tableClass"
          >
            <el-table-column fixed prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="stuId" label="学号" min-width="120"></el-table-column>
            <el-table-column prop="descrip" label="报修原因" min-width="200"></el-table-column>
            <el-table-column prop="place" label="地点" min-width="100"></el-table-column>
            <el-table-column :formatter="dateFormat" prop="time" label="报修时间" width="140"></el-table-column>
            <el-table-column prop="status" label="报修状态" width="80"></el-table-column>
            <el-table-column label="操作" fixed="right" width="80">
              <el-button
                slot-scope="scope"
                size="mini"
                @click="handleEdit(scope.$index,scope.row)"
              >查看</el-button>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--分页组件-->
    <el-row class="page">
      <el-col :span="24">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesCount*10"
          :current-page.sync="page"
          @current-change="getList"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      input_Id: "", // 学号
      page: 1, // 当前页码
      pagesCount: 1 //总页数
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取报修列表信息
    getList() {
      this.$axios
        .get("/api/order/queryListByPage/" + this.page + "/10")
        .then(res => {
          res.data.orders.forEach(item => {
            if (item.status == 0) {
              item.status = "已关闭";
            } else if (item.status == 1) {
              item.status = "未处理";
            } else if (item.status == 2) {
              item.status = "处理中";
            } else if (item.status == 3) {
              item.status = "暂缓维修";
            } else if (item.status == 4) {
              item.status = "已完成";
            }
          });
          this.input_Id = "";
          this.tableData = res.data.orders;
          this.pagesCount = res.data.pagesCount;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    },
    // 按学号查询列表
    getListId() {
      if (this.input_Id == "" || isNaN(this.input_Id)) {
        this.$alert("请输入正确的学号!", {
          confirmButtonText: "确定",
          center: true
        });
        return false;
      } else if (this.input_Id.trim().toString().length !== 11) {
        this.$alert("学号长度应为11位,且不能含有空格!", {
          confirmButtonText: "确定",
          center: true
        });
        return false;
      }
      this.$axios
        .get("/api/order/queryListByStuid/" + this.input_Id)
        .then(res => {
          if (res.data.status == 1) {
            res.data.orderList.forEach(item => {
              if (item.status == 0) {
                item.status = "已关闭";
              } else if (item.status == 1) {
                item.status = "未处理";
              } else if (item.status == 2) {
                item.status = "处理中";
              } else if (item.status == 3) {
                item.status = "暂缓维修";
              } else if (item.status == 4) {
                item.status = "已完成";
              }
            });
            this.tableData = res.data.orderList;
            this.pagesCount = 1;
          } else {
            this.$alert(res.data.message, {
              confirmButtonText: "确定",
              center: true
            });
            if (!res.data.orderList) {
              this.tableData = [];
            }
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert("网络错误，请稍后再试", {
            confirmButtonText: "确定",
            center: true
          });
        });

      // 根据本地数据查询，不需接口(但需一次性获得所有数据，并保存备份以作二次查询使用)
      // if(isNaN(this.input_Id)||this.input_Id.trim() == ""){
      //   this.$message.error("请输入正确的学号");
      // }else{
      //   var newtable=[];
      //   this.tableData.forEach(item => {
      //     if(this.input_Id == item.id){
      //       newtable.push(item);
      //     }
      //   });
      //   this.tableData = newtable;
      //   newtable = null;
      // }
    },
    //跳转到详情页
    handleEdit(index, obj) {
      this.$router.push({ path: "/table/listinfo/" + obj.id });
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      var date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      return Y + M + D;
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 单元格样式
    tableClass() {
      return "text-align: center;";
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  margin: 0 auto;
  max-width: 1200px;
}
#searchBtn {
  margin-top: 10px;
}
.block_top {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #0075a9;
  span {
    color: #0075a9;
    font-weight: bold;
  }
}
.page {
  margin: 10px auto;
}
@media screen and (max-width: 768px) {
  .search-box {
    display: flex;
    margin: 10px 0;
    .el-input {
      height: 20px;
      width: 74%;
      margin-left: 10px;
    }
    #searchBtn {
      margin-top: 0px;
      margin-left: 10px;
    }
  }
}
.el-pagination {
  white-space: nowrap;
  width: 280px;
  margin: 0 auto;
  color: #303133;
  font-weight: 700;
}
</style>